<template>
  <div class="scroll-wrap">
    <div class="product">
      <div class="aside-wrap">
        <scroll class="menu-wrap" :data="cate">
          <div>
            <ul class="menu">
              <li
                v-for="(item, index) in cate"
                class="item"
                :class="{active: currentIndex===item.category_id}"
                @click="selectMenu(item.category_id, $event)">
                <span class="text">
                  {{item.cate_name}}
                </span>
              </li>
            </ul>
          </div>
        </scroll>
        <div>
        <scroll class="explain-wrap" :data="[]">
          <div class="explain">
            <h2 class="title">配送说明</h2>
            <p>
              {{freeData.min_fee || 0}}元起送<br>
              满{{freeData.free_fee || 0}}元免费配送<br>
              白天7:00-22:00<br>
              30分钟送达
            </p>
            <p>
              夜间22:00-7:00<br>
              20分钟送达</p>
              <p>
                正常配送30分钟
              </p>
              <p>电话:{{freeData.phone || 0}}<br>微信:{{freeData.wx || 0}}</p>
          </div>
        </scroll>
        </div>
      </div>
      <scroll class="product-wrap" ref="productWrap" :data="product.rows">
        <div>
        <ul ref="product-hook">
            <li
              v-for="(item, key) in product.rows"
              :key="key"
              @click="jumpCart(item.product_id)"
              class="product-item">
              <!--:to="{path: '/detail',query: {id: item.product_id }}"-->
              <div class="thumbnail">
                <img v-lazy="item.pic" :data-src="item.pic">
              </div>
              <div class="content">
                <h3 class="title">{{item.product_name}}</h3>
                <div class="price">
                  <span class="sale">￥{{item.price}}</span>
                  <span v-if="item.original_price" class="del">￥{{item.original_price}}</span>
                </div>
                <div class="cartcontrol-wrap">
                  <Cartcontrol :productData="item" />
                </div>
              </div>
            </li>
        </ul>
        </div>
      </scroll>
    </div>
    <JumpCart ref="jumpCartInfo" @close="closeJumpCart" v-if="detailData" :data="detailData" />
  </div>
</template>
<script>
import Scroll from './base/scroll'
import HeaderBar from './headerbar'
import JumpCart from './jumpcart'
import Cartcontrol from './cartcontrol'
import Detail from './detail'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      currentIndex: 0,
      listHeight: [],
      scrollY: 0,
      selectedProductId: null,
      isShowJumpCart: false,
      isDetailLoaded: false
    }
  },
  computed: {
    ...mapGetters({
      product: 'getCurProduct',
      detailData: 'getDetailData', // 获取详情数据
      cate: 'cate', // 分类
      free: 'free' // 分类
    }),
    freeData() {
      return this.free || {}
    },
    isDetailData() {
      // console.log('this.detailData', this.detailData)
      if (this.detailData.category_id) {
        return true
      } else {
        return false
      }
    }
  },
  beforeCreate() {
    this.$store.dispatch('getCate').then(res => {
      this.$set(this._data, 'currentIndex', res[0].category_id)
      this.$store.dispatch('getRequestData', res[0].category_id) // 获得产品数据
    }) // 获得分类数据
    this.$store.dispatch('getFree') // 获得免费配送数据
  },
  methods: {
    selectMenu(id) {
      this.$set(this._data, 'currentIndex', id)
      this.$store.dispatch('getRequestData', id)
    },
    selProduct(id, ev) {
      this.selectedProductId = id
      this.$refs.detail.show()
    },
    jumpCart(id) {
      this.$store.dispatch('getDetailData', id)
      if (this.$refs.jumpCartInfo) {
        this.$refs.jumpCartInfo.open()
      }
    },
    closeJumpCart() {
      this.$store.dispatch('clearDetaiData')
      console.log(11111)
      // this.isShowJumpCart = false
    }
  },
  components: {
    HeaderBar,
    Cartcontrol,
    Detail,
    Scroll,
    JumpCart
  },
  watch: {
    $route() {
      let productWrap = this.$refs.productWrap
      if (productWrap) {
        productWrap.refresh()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/styles/product';
</style>
